<template>
  <div class="food" v-show="showFlag" ref="food">
    <div class="food-content">
      <div class="image-header">
        <img :src="food.image" />
        <div class="back" @click="hide">
          <i class="icon-arrow_lift"></i>
        </div>
      </div>
      <div class="content">
        <h1 class="title">{{food.name}}</h1>
        <div class="detail">
          <span class="sell-count">月售{{food.sellCount}}</span>
          <span class="rating">好评率{{food.rating}}%</span>
        </div>
        <div class="price">
          <span class="now">¥{{food.price}}</span>
          <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
        </div>
        <div class="cartcontrol-wrapper">
        <cartcontrol :food="food"></cartcontrol>
      </div>
      <div class="buy" @click="addFirst" v-show="!food.count||food.count === 0">加入购物车</div>
      </div>
      <split v-show="food.info"></split>
      <div class="info" v-show="food.info">
          <h1 class="title">商品信息</h1>
          <p class="text">{{food.info}}</p>
      </div>
      <split></split>
      <div class="rating">
          <h1 class="title">商品评价</h1>
          <ratingselect :select-type="selectType" @toggle="tog" @change="cha" :only-content="onlyContent" 
          :desc="desc" :ratings="food.ratings"></ratingselect>
          <div class="rating-wrapper">
              <ul v-show="food.ratings && food.ratings.length">
                  <li v-show="needShow(rating.rateType, rating.text)" v-for="(rating,index) in food.ratings" :key=index class="rating-item">
                      <div class="user">
                          <span class="name">{{rating.username}}</span>
                          <img width=12 height=12 class="avatar" :src="rating.avatar" alt="">
                      </div>
                      <div class="time">{{rating.rateTime | formatDate}}</div>
                      <p class="text">
                          <span :class="{'icon-thumb_up':rating.rateType ===0,
                          'icon-thumb_down': rating.rateType === 1 }"></span>{{rating.text}}
                      </p>
                  </li>
              </ul>
              <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import {formatDate} from '../../common/js/formatDate'
import cartcontrol from '../cartcontrol/cartcontrol'
import split from '../split/split'
import ratingselect from '../ratingselect/ratingselect'
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2
export default {
  data() {
    return {
      showFlag: false,
      selectType : ALL,
      onlyContent: true,
      desc:{
          all:'全部',
          positive: '推荐',
          negative: '吐槽'
      }
    };
  },
  filters: {
      formatDate(time) {
          let date = new Date(time)
          return formatDate(date, 'yyyy-MM-dd hh-mm')
      }
  },
  props: {
    food: {
      type: Object
    }
  },
  components:{
      cartcontrol,
      split,
      ratingselect
  },
 
  methods: {
      cha(type) {
        this.selectType = type;
        this.$nextTick(() => {
            this.scroll.refresh()
        })
},
  
    tog(val){
        this.onlyContent = val
        this.$nextTick(() => {
            this.scroll.refresh()
        })
    },
    show() {
      this.showFlag = true;
      this.selectType = ALL;
      this.onlyContent = true;
      this.$nextTick(() => {
          if(!this.scroll){
              this.scroll = new BScroll(this.$refs.food, {
                  click: true
              })
          }else{
              this.scroll.refresh()
          }
      })
    },
    hide() {
      this.showFlag = false;
    },
    addFirst(event){
        
        if(!event._constructed){
            return 
        }
        Vue.set(this.food, 'count', 1)
    },
    needShow(type,text){
        if(this.onlyContent && !text){
            return false
        }
        if(this.selectType === ALL){
            return true
        }else{
            return type === this.selectType
        }
    } 
  }
};
</script>
<style lang="stylus">
.food 
    position fixed
    left 0
    top 0px
    bottom 48px
    z-index 30
    width 100%
    border 1px solid #000
    background #fff

    .image-header 
        position relative
        width 100%
        padding-top 100%

        img 
            position absolute
            top 0
            left 0
            width 100%
            height 100%


        .back 
            position absolute
            top 10px
            left 0

            .icon-arrow_lift 
                display block
                padding 10px
                font-size 20px
                color #fff

    .content
        position relative
        padding 18px
        .title
            line-height 14px
            margin-bottom 8px
            font-size 14px
            font-weight 700
            color rgb(7, 17, 27)
        .detail
            margin-bottom 18px
            line-height 10px
            font-size 0
            .sell-count, .rating
                font-size 10px
                color rgb(147, 153, 159)
            .sell-count
                margin-right 12px
        .price
            font-weight 700
            line-height 24px
            .now
                margin-right 8px
                font-size 14px
                color rgb(147, 20, 20)
            .old
                text-decoration line-through
                font-size 10px
                color rgb(147, 153, 159)

        .cartcontrol-wrapper
            position absolute
            right 12px
            bottom 12px
        .buy
            position absolute
            right 18px
            bottom 18px
            z-index 10
            height 24px
            line-height 24px
            padding 0 12px
            box-sizing border-box
            border-radius 12px
            font-size 10px
            color #fff
            background rgb(0, 160, 220)
    .info
        padding 18px
        .title
            line-height 14px
            margin-bottom 6px
            font-size 14px
            color rgb(7, 17, 27)
        .text
            line-height 24px
            padding 0 8px
            font-size 12px
            color rbg(77, 85, 93)
    .rating
        padding-top 18px
        .title
            line-height 14px
            margin-left 6px
            font-size 14px
            color rgb(7, 17, 27)
        .rating-wrapper
            padding 1 18px
            .rating-item
                position relative
                padding 16px 0
                .user
                    position absolute
                    right 0
                    top 16px
                    line-height 12px
                    font-size 0
                    .name
                        display inline-block
                        vertical-align top
                        margin-right 6px
                        font-size 10px
                        color rgb(147, 153, 159)
                    .avatar
                        border-radius 50%
                .time
                    line-height 12px
                    font-size 10px
                    color rbg(147, 153, 159)
                    margin-bottom 6px
                .text
                    line-height 16px
                    font-size 12px
                    color rgb(1,17, 27)
                    .icon-thumb_down, .icon-thumb_up
                        line-height 24px
                        margin-right 4px
                        font-size 12px
                    .icon-thumb_up
                        color rgb(0, 160, 220)
                    .icon-thumb_down
                        color rgb(147, 153, 159)
            .no-rating
                padding 16px 0
                font-size 12px
                color rgb(147, 153, 159)


    </style>